<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>最具创意年货大比拼</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/blendui/2.0.0/boost.min.css" />
  <link rel="stylesheet" type="text/css" href="{$resource_basic}/css/webapp.css" />
  <script type="text/javascript" src="{$resource_basic}/js/jquery.min.js"></script>
  <script type="text/javascript" src="http://apps.bdimg.com/libs/blendui/2.0.0/boost.min.js"></script>
  
  <style>
      body{
          background-color:  #fefefe;
      }
      .blend-panel{background-color: #fafcfb;}
      .blend-picture-full img{
          margin: 0;
      }
      .top_create_bg{
          background-image: url("{$resource_basic}img/vote/index_top_bg.jpg");
          height: 8rem;
          width: 100%;
          background-size:contain;
      }
      .top_create_bg [class*=blend-col-]{
          background-color:#ffea01;
          border: none;
      }
      
      .top_create_bg [class*=blend-col-4]{
          background-color:#ffea01;
          border: none;
          color: #f9493c;
          text-align: center;
          font-size: 1.6rem;
          font-weight: 700;
      }
      
      .bottom_create_bg{
          background-color: #fefefe;
      }
      
      .bottom_create_bg [class*=blend-col-]{
          background-color: #fefefe;
          border: none;
      }
      
      
      
      
      .create_vote_option [class*=blend-col-4]{
          background-color:#fefefe;
          border: none;
          color: #404040;
          text-align: center;
          font-size: 2rem;
      }
      
      .create_vote_option [class*=blend-col-8]{
          background-color:#fefefe;
          border: none;
          color: #404040;
          text-align: left;
          font-size: 1.6rem;
      }
      
      
      .create_option_btn,.create_option_btn:focus,.create_option_btn:hover{
          background-color: #f9493c;
          border-radius: 10px;
          border: none;
          box-shadow: 1px 3px 2px 1px #A30001;
      }
      
      .blend-suggest-input-gray .blend-suggest-ico{
          background-color: #ff756B;
      }
      .blend-suggest-input-gray input{
          background-color: #fafcfb;
      }
      .blend-suggest-input-gray{
          border-color: #ff756B;
          border-radius:5px;
      }
      .btn_show,.btn_show:focus,.btn_show:active,.btn_show:hover
      {
          background-color: #ff756b;
          border: none;
          color: #fff;
      }
      
      .btn_show_foucus,.btn_show_foucus:focus,btn_show_foucus:active,.btn_show_foucus:hover
      {
          background-color: #f9493c;
      }
  </style>
</head>

<body>
    <!--头部图片-->
    <figure class="blend-picture blend-picture-full ">
       <img src="{$resource_basic}img/vote/index_banner.jpg"> 
    </figure>
    
    
    
    
   <!--我要报名-->
   
   <div class="blend-grid blend-container-fluid top_create_bg">
       <br/>
       <div class="blend-row">
           <span class="blend-col-4">
               已报名
               <br/>
               {$initial_info.vote_option_count}
           </span>
           <span class="blend-col-4" style=" border-left: 1px solid #f9493c;">
               投票人次
               <br/>
               {$initial_info.got_prize_count}
           </span>
           <span class="blend-col-4" style=" border-left: 1px solid #f9493c;">
               访问量
               <br/>
               {$initial_info.pv}
           </span>
       </div>
   </div>
   

   <!--提交参赛作品-->
    <div class="blend-grid blend-container-fluid create_vote_option">
        <div class="blend-row">
           <span class="blend-col-4">
               
           </span>
           <span class="blend-col-4" style="color:#ff756b; font-size: 3rem; padding: 1rem 0;">
               报名处
           </span>
            <span class="blend-col-4">
               
           </span>
           
       </div>
       <div class="blend-row">
           <span class="blend-col-4">
               上传照片
           </span>
           <span class="blend-col-8" id="wx_upload_img">
                <img  id="chooseImage" style=" width: 25%" src="{$resource_basic}img/vote/add_img.png"> 
           </span>
           
       </div>
        <div class="blend-row">
           <span class="blend-col-4">
               推荐理由
           </span>
           <span class="blend-col-8">
               <textarea style=" border-color: #ff756B; border-radius: 5px; height: 10rem; width: 100%;" id="content" name="content" placeholder="好吃?健康?有爱?有面子?适合送礼?有智慧?"></textarea>
           </span>
           
       </div>
        
<!--        <div class="blend-row">
           <span class="blend-col-4">
               测试字段
           </span>
            <span class="blend-col-8" id="test">
               
           </span>
           
       </div>-->
   </div>
   
   <div class="blend-grid blend-container-fluid bottom_create_bg">
       <div class="blend-row">
           <span class="blend-col-2"></span>
           <span class="blend-col-8">
               <button class="blend-button blend-button-primary blend-button-large create_option_btn" id="create_option_btn">确认报名</button>
           </span>
           <span class="blend-col-2"></span>
       </div>
       <br/>
       
   </div>
   <div class="blend-grid blend-container-fluid bottom_create_bg">
       <div class="blend-row">
           <span class="blend-col-2"></span>
           <span class="blend-col-8">
               <button class="blend-button blend-button-primary blend-button-large create_option_btn" id="create_option_btn_rest">重新填写</button>
           </span>
           <span class="blend-col-2"></span>
       </div>
       <br/>
       
   </div>
<!--   
   <div class="blend-grid blend-container-fluid bottom_create_bg">
       <div class="blend-row">
           <span class="blend-col-2"></span>
           <span class="blend-col-8">
               <button class="blend-button blend-button-primary blend-button-large create_option_btn" id="create_option_btn_test">test</button>
           </span>
           <span class="blend-col-2"></span>
       </div>
       <br/>
       
   </div>-->
   
<!--   <div class="blend-panel">
        <div class="blend-panel-header blend-panel-left">
            精彩评论 <span style="float:right; color: #03ab9e;" id='add_commnet'> + 我来说两句</span>
        </div>
        
        
    </div>-->
 

   
   <!--活动介绍-->
   <figure class="blend-picture blend-picture-full ">
       <img src="{$resource_basic}img/vote/test.jpg"> 
    </figure>
   
    
    
<!--    <div class="blend-panel">
        <div class="blend-panel-header blend-panel-left">
            精彩评论 <span style="float:right; color: #03ab9e;" id='add_commnet'> + 我来说两句</span>
        </div>
        
        
    </div>
    -->
<!--    <div id="customDialog" class="blend-dialog">
        <div class="blend-grid blend-container-fluid" style="margin-top:20px;">
            <div class="blend-formgroup">
                <textarea class="blend-formgroup-input" style=" height: 60px;" id="content" name="content" placeholder="我想说两句..."></textarea>
            </div>
            <div class="" style=" margin-top:10px; margin-bottom:10px;">
                <button class="blend-button blend-button-primary blend-button-large" id="success" style=" background-color:#03ab9e;">发布</button>
            </div>  
        </div>
    </div>-->
<!--底部菜单-->
<div style=" height: 60px;"></div>
<div class="footer_nav">
    <nav data-blend-widget="tabnav" class="blend-tabnav" style="margin-bottom: 0px; bottom: 0px; position: absolute; width: 100%; height: 50px; border-top: #b2b2b2 1px solid;">
        <a class="blend-tabnav-item blend-tabnav-item-active" href="{:U('M/Vote/index')}" style="height:50px;">
            <img src="{$resource_basic}/img/vote/index01.png" style=" height: 50%;margin-top: 5px;"/>
                <span class="blend-tabnav-item-text" style="height:30px; line-height: 16px;font-size: 12px; color: #777">
                     首页
                </span>
        </a>
        <a class="blend-tabnav-item blend-tabnav-item-active" href="{:U('M/Vote/ranks',array('state'=>1))}" style="height:50px;">
                     <img src="{$resource_basic}/img/vote/index02.png" style=" height: 50%;margin-top: 5px;"/>
                    <span class="blend-tabnav-item-text" style="height:30px; line-height: 16px;font-size: 12px; color: #777;">
                     排名
                </span>
        </a>
        <a class="blend-tabnav-item blend-tabnav-item-active" href="{:U('M/Vote/create')}" style="height:50px;">
                     <img src="{$resource_basic}/img/vote/index031.png" style=" height: 50%;margin-top: 5px;"/>
                     <span class="blend-tabnav-item-text" style="height:30px; line-height: 16px; font-size: 12px; color: #FF756B;">
                     报名
                </span>
        </a>
        <a class="blend-tabnav-item blend-tabnav-item-active" href="{:U('M/Vote/steps')}" style="height:50px;">
                     <img src="{$resource_basic}/img/vote/index04.png" style=" height: 50%;margin-top: 5px;"/>
                     <span class="blend-tabnav-item-text" style="height:30px; line-height: 16px; font-size: 12px; color: #777;">
                     得奖攻略
                </span>
        </a>


     </nav>
</div>
    <!--底部菜单end-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
//分享

wx.config({
    debug: false,
    appId: '{$signPackage["appId"]}',
    timestamp: {$signPackage["timestamp"]},
    nonceStr: '{$signPackage["nonceStr"]}',
    signature: '{$signPackage["signature"]}',
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
      'onMenuShareTimeline',
      'onMenuShareAppMessage',
      'chooseImage',
      'previewImage',
      'uploadImage',
      'downloadImage'
    ]
});

// 5.1 拍照、本地选图
var images = {
    localId: [],
    serverId: [],
    tmpId:[]
  };
  var imgs_count=0;
  
  document.querySelector('#chooseImage').onclick = function () {
    wx.chooseImage({
      count: 3-imgs_count, // 默认9
      sizeType: [ 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album'], 
      success: function (res) {
        images.localId = res.localIds;
        
//        alert('已选择 ' + res.localIds.length + ' 张图片');
        for(var i=0; i<res.localIds.length; i++)
        {

            $("#wx_upload_img").prepend('<img style=" width: 25%; margin: 0 1rem;" src="'+images.localId[i]+'">');
            sessionStorage.setItem('imgs'+i,images.localId[i]);
            imgs_count++;
            sessionStorage.setItem('localId',images.localId[i]);
            images.tmpId.push(images.localId[i]);
        }
        
//        var length = images.localId.length;
        if(imgs_count>=3)
        {
            $("#chooseImage").hide();
        }
//        alert("长度"+images.localId.length);
//      $('#uploadImage').show();  
      }
    });
  };
  // 5.3 上传图片
  document.querySelector('#create_option_btn').onclick = function () {
      
      /*
       * 判断活动是否已经截止
       */
    var if_activity_expired = {$if_activity_expired};
    if(if_activity_expired===1)
    {
        alert("亲，本期投票活动完满结束，谢谢亲的积极参与，更多详情，请留意官方公众号");
        return false;
    }
    if (images.localId.length == 0) {
      alert('亲，请上传一下年货图片哦~');
      return;
    }
    
    var content = $("#content").val();
    if(content==="")
    {
        alert("亲，请填写一下推荐理由哦~");
        return;
    }
               
    var i = 0, length = images.tmpId.length;
    images.serverId = [];
    function upload() {
      wx.uploadImage({
        localId: images.tmpId[i],
        success: function (res) {
          i++;
//          alert('已上传：' + i + '/' + length);
          images.serverId.push(res.serverId);
//          $('#test').append(res.serverId);
          if (i < length) {
            upload();
          }
          else
          {
//              alert(images.tmpId);
//              alert(images.localId.length);
//              上传完成后的处理
//            $("#create_option_btn2").click();
                var json = {};
                for(ii=0;ii<images.serverId.length;ii++)
                {
                    json[ii]=images.serverId[ii];
                }

                var wx_media_ids = (JSON.stringify(json));
                sessionStorage.wx_media_ids = wx_media_ids;
//                alert(wx_media_ids);
    
                /*
                * 
                * Ajax 提交数据
                * 1. 图片信息
                * 2. 推荐理由
                * 
                */
               var content = $("#content").val();
               if(content==="")
               {
                   alert("亲，请填写一下推荐理由哦~");
                   return false;
               }
               else
               {
                   open_loading();
//                   alert("vsid="+{$vsid}+"&wx_media_ids="+wx_media_ids+"&content="+content);
//                   return false;
                   $.ajax({ 
                       type: 'POST', 
                       url: '{:U("M/Vote/create")}', 
                       dataType: 'json', 
                       data:"vsid="+{$vsid}+"&wx_media_ids="+wx_media_ids+"&content="+content,
                       cache: false, 
                       error: function(){ 
//                           alert("No");
                           return false; 
                       }, 
                       success:function(json){ 
//                           alert("{:U('M/Vote/vote_detail')}"+"?vid="+json.id+"&promotion=1");
                                if(json.id==0)
                                {
                                    alert("请勿重复发起投票");
                                    window.location.href = "{:U('M/Vote/index')}";
                                }
                                else
                                {
                                    window.location.href = "{:U('M/Vote/vote_detail')}"+"?vid="+json.id+"&promotion=1";
                                }
                           
                            
//                           window.location.reload();

                       } 
                   });
               }
    
          }
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
      });
    }
    upload();
//    $('#uploadImage').hide();  
//    $('#confirm_and_back').show();

    
    
    /*
     * 
     * Ajax 提交数据
     * 1. 图片信息
     * 2. 推荐理由
     * 
     */
//    var content = $("#content").val();
//    if(content=="")
//    {
//        alert("请填写推荐理由");
//        return false;
//    }
//    else
//    {
//        alert("vsid="+{$vsid}+"&wx_media_ids="+wx_media_ids+"&content="+content);
//        return false;
//        $.ajax({ 
//            type: 'POST', 
//            url: '{:U("M/Vote/create")}', 
//            dataType: 'json', 
//            data:"vsid="+{$vsid}+"&wx_media_ids="+wx_media_ids+"&content="+content,
//            cache: false, 
//            error: function(){ 
//                return false; 
//            }, 
//            success:function(json){ 
//                
//
//            } 
//        });
//    }
    
  };
  

  
 wx.ready(function () {
// 在这里调用 API
    wx.onMenuShareTimeline({
        title: '我领了9个现金红包，看看你能领多少个！', // 分享标题
        desc: '年货送什么，这创意我跪了，一起参与创意投票领奖吧', // 分享描述
        link: "{$site_url}{:U('M/Vote/index')}"+"?vsid=1", // 分享链接
        imgUrl: 'http://www.zhongcetianxia.com/Public/template/default/img/vote/share_ico.jpg', // 分享图标
        success: function () { 
            // 用户确认分享后执行的回调函数，生成红包

        },
        cancel: function () { 
            // 用户取消分享后执行的回调函数
        }
    });
    
    wx.onMenuShareAppMessage({
        title: '我领了8个红包，你呢?', // 分享标题
        desc: '简单参与即领，还有机会抢Iphone6/Ipad/500元购物卡', // 分享描述
        link: "{$site_url}{:U('M/Vote/index')}"+"?vid=1", // 分享链接
        imgUrl: 'http://www.zhongcetianxia.com/Public/template/default/img/vote/share_ico.jpg', // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () { 
            // 用户确认分享后执行的回调函数

        },
        cancel: function () { 
            // 用户取消分享后执行的回调函数
        }
    });

});

</script>

<script>
    $(function(){
        /*
         * 流程，
         * 1. 进入页面，先初始化图片上传的计数为 0 ；
         * 2. 调用微信的接口来上传图片
         * 
         */
        
        $("#create_option_btn_test").click(function(){
            alert(sessionStorage.getItem("localId"));
        });
        
        $("#create_option_btn_rest").click(function(){
            window.location.reload();
        });
        
         

    });
    
    function open_loading()
    {
        var loading = $.blend.loading();
        loading.show();
    }
    
    function close_loading()
    {
        $('.blend-loading').hide();
    }


</script>
<?php require_once 'cs.php';echo '<img src="'._cnzzTrackPageView(1256622573).'" width="0" height="0"/>';?>
<include file="Index/foot_analyze"/>
</body>
</html>